<template>
  <a_page :是列表页="false">
    <a页头固定栏 :list="list" :详情="详情" />
    <el-form :model="单项" label-position="top" ref="formRef" :rules="rule" label-width="80px" class="">
      <div class="row q-gutter-sm">
        <div class="w-full row q-gutter-sm">
          <a表单字段 :插组件="插组件" :编辑否="true" :单项="单项" :字段="插组件.取字段('项目信息id')" 标签位置="left" 标题="项目" :字段宽="250" :清底距="true"
            父环境="独立详情">
          </a表单字段>
          <a表单字段_仅展示 标签位置="left" 标题="询价人" :字段宽="150" :内容="util.fmt用户名(插组件.a.外键关联字段集.创建者)">
          </a表单字段_仅展示>
          <a表单字段_仅展示 标签位置="left" 标题="询价日期" :字段宽="230" :内容="util.fmt时间(单项.CreatedAt)">
          </a表单字段_仅展示>
          <q-space />
          <a表单字段_仅展示 标签位置="left" 标题="报价人" :字段宽="150" :内容="util.fmt用户名(插组件.a.外键关联字段集.报价人_用户id)" />
          <a表单字段_仅展示 标签位置="left" 标题="报价日期" :字段宽="230" :内容="util.fmt时间(单项.报价日期)">
          </a表单字段_仅展示>
          <a表单字段_仅展示 标签位置="left" 标题="审核" :字段宽="150" :内容="util.fmt用户名(插组件.a.外键关联字段集.审核_用户id)" />
        </div>
        <template v-for="card in 插组件.组件.cards">
          <q-card class="w-full">
            <q-card-section>
              <div class="text-h6 text-primary text-center">{{ card.标题 ? card.标题 : card.名称 }}</div>
            </q-card-section>
            <q-separator inset />
            <q-card-section class="row q-gutter-md">
              <template v-for="字段 in 插组件.筛选card字段(card.名称, ['底座配置', '联轴器配置'])" :key="字段.名称">
                <a表单字段 v-if="详情.a.已熟" :插组件="插组件" :编辑否="true" :单项="单项" :字段="字段" 父环境="独立详情">
                  <template #中间>
                    <template v-if="字段.名称 == '底座价格'">
                      <a单字段输入 :字段="插组件.取字段('底座配置')" :单项="单项" :插组件="插组件" :不展开选项否="true" />
                    </template>
                    <template v-if="字段.名称 == '联轴器价格'">
                      <a单字段输入 :字段="插组件.取字段('联轴器配置')" :单项="单项" :插组件="插组件" :不展开选项否="true" />
                    </template>
                  </template>
                </a表单字段>
              </template>
              <!-- <a表单字段 :插组件="插组件" :编辑否="true" :单项="单项" :字段组="插组件.筛选card字段(card.名称)" v-slot="{ 字段 }">
                {{ 字段 }}
              </a表单字段> -->
            </q-card-section>
          </q-card>
        </template>

        <q-card class="w-full">
          <q-list bordered class="q-pa-md" separator>
            <q-item-label>说明：</q-item-label>
            <q-item clickable v-ripple>
              <q-item-section>
                1)标准供货范围：泵、电机、底座、联轴器及防护罩、地脚螺栓及紧固件、反法兰及紧固件。
              </q-item-section>
            </q-item>
            <q-item clickable v-ripple>
              <q-item-section>
                2)报价含指导安装，不含安装、卸货、商检、测试费用。
              </q-item-section>
            </q-item>
            <q-item clickable v-ripple>
              <q-item-section>
                3)报价含税、含1000公里运费，超出部分按标准运费表计算。
              </q-item-section>
            </q-item>
            <q-item clickable v-ripple>
              <q-item-section>
                4)报价有效期：30天
              </q-item-section>
            </q-item>
          </q-list>
        </q-card>
      </div>
    </el-form>
  </a_page>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted, onBeforeUnmount, watch, provide, watchEffect } from 'vue'
import * as util from '@/utils'
import a表单字段 from '@/components/a表单字段.vue';
import a表单字段_仅展示 from '@/components/a表单字段_仅展示.vue';
import a页头固定栏 from '@/components/a页头固定栏.vue';
defineOptions({
  name: '项目管理.项目明细.详情',
})
const shape = ref('line')
const props = defineProps({
  list: Object,
  url: String,
  id: null
})

import use详情 from '@/hooks/use详情';
function 复制后处理(单项: 单项) {
  单项.客户单位 += 1
  单项.项目名称 += 1
}
const 外键组 = [{ 字段名: "项目信息" }]
const 详情 = use详情({ list: props.list, url: props.url, 复制后处理, 外键组 })
const { 单项, 初始化, formRef, rule, 插组件 } = 详情
// console.log(`插组件.a 👉`, 插组件.a)

const 单项hook = reactive({
  属性标题: {} as any
})
// provide('字段hook', 字段hook)
provide('单项hook', 单项hook)

watch(() => 单项.密封形式, (newValue, oldValue) => {
  console.log(`单项.密封形式 newValue 👉`, newValue)
  // const 字段 = util.字段集['项目管理.备品备件.填料或机封']
  // console.log(`插组件.组件.字段组 👉`, 插组件.组件.字段组)
  单项hook.属性标题.填料或机封 = newValue

}, { immediate: true })

watch(() => 单项.电机型号, (newValue, oldValue) => {
  let 电机型号 = 单项.电机型号
  // console.log(`电机型号 👉`, 电机型号)
  let 字段 = 插组件.取字段('电机型号')
  let res = 插组件.a.候选值集[字段.名称]
  if (res) {
    let 对应字段名 = util.split取最末字符(字段.候选值源字段!)
    // console.log(`res 👉`, res)
    let obj = util.查元素(res, 电机型号, 对应字段名)
    // console.log(`obj 👉`, obj)
    if (obj) {
      单项.功率 = obj?.功率
      let 电机品牌 = 单项.配套电机品牌
      let 价格 = obj[电机品牌]
      if (!价格) {
        电机品牌 = 单项.配套电机品牌 + '电机'
        价格 = obj[电机品牌]
      }
      // console.log(`obj.佳木斯电机 👉`,obj.佳木斯电机)
      // 单项.电机价格 = obj.佳木斯电机
      单项.电机价格 = 价格
    }
  }
})

watch(单项, (newValue, oldValue) => {
  let arr = ['泵价格', '底座价格', '反法兰价格', '联轴器价格', '电机价格', '运费', '其他价格',]
  let 单价 = 0
  arr.forEach(字段名 => {
    单价 += 单项[字段名]
  });
  单项.单价 = 单价
  单项.总价 = 单价 * 单项.数量
})

</script>

<style></style>
